<template>
  <div class="hm-rotation" :style="size" v-items="rotationCurrent">
    <transition-group :name="animate" tag="ul">
      <li
        class="hr-list"
        v-for="(item, key) in info"
        v-show="key === rotationKey"
        :key="item.id"
      >
        <hm-image-bg :site="item.picUrl" />
        <hm-title
          class="hrm-title"
          :trig="key === rotationKey && flag"
          :text="item.title"
          v-if="isTitleShow"
        />
      </li>
    </transition-group>
  </div>
</template>

<script>
import titleText from "@/components/titleText.vue";
import baseImage from "@/components/baseImage.vue";

/**
 * 轮播图组件
 */
export default {
  name: "hm-rotation",
  components: {
    [titleText.name]: titleText,
    [baseImage.name]: baseImage,
  },
  props: {
    info: Array, // 轮播图数据列表
    isTitleShow: {
      // 控制标题是否显示
      type: Boolean,
      default: false,
    },
    isControl: {
      // 轮播图可控性变量
      type: Boolean,
      default: false,
    },
    rotational: {
      // 轮播运行状态
      type: Boolean,
      default: true,
    },
    size: Object, // 轮播图样式对象需要指定宽高
    duration: {
      // 动画持续时间,单位毫秒
      type: Number,
      default: 5000,
    },
    animate: {
      type: String,
      default: "rotation",
      validator: function (value) {
        return ["rotation", "fade"].indexOf(value) !== -1;
      },
    },
  },
  data: () => ({
    rotationKey: 0, // 轮播初始值
    rotationTimer: null, // 轮播定时器
    flag: false, // 标题滚动控制变量
  }),
  watch: {
    rotational(value) {
      value ? this.rotationAni() : this.stopAni();
    },
  },
  computed: {
    rotationCurrent() {
      let tempObj = Object.assign({}, this.info[this.rotationKey]);
      return tempObj;
    },
  },
  methods: {
    autoAni() {
      let num = this.rotationKey;
      if (++num >= this.info.length) {
        this.rotationKey = 0;
      } else {
        this.rotationKey = num;
      }
      this.$emit("rotationChange", this.info[this.rotationKey]);
    },
    rotationAni() {
      this.stopAni();
      this.rotationTimer = setTimeout(() => {
        if (this.rotational) {
          this.autoAni();
          this.rotationAni();
        }
      }, this.duration);
    },
    stopAni() {
      clearTimeout(this.rotationTimer);
    },
    changeKey(check) {
      this.info.forEach((value, key) => {
        check(value) && (this.rotationKey = key);
      });
    },
    focus() {
      this.flag = true;
    },
    lostFocus() {
      this.flag = false;
    },
  },
  beforeDestroy() {
    this.stopAni();
  },
  activated() {
    this.rotationAni();
  },
  deactivated() {
    this.stopAni();
  },
  created() {
    this.rotationAni();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/variables";
.hm-rotation {
  overflow: hidden;
  background-color: rgba(168, 168, 168, 0.5);
  border: $hm-border;
  box-shadow: $hm-shadow;
  background-clip: content-box;
  border-radius: 4px;
  margin-bottom: 24px;
  transition: transform 0.02s ease-in-out;
  position: relative;
  box-sizing: border-box;
  &.focushover {
    transform: scale(1.08);
    border: $hm-border-h;
    box-shadow: $hm-shadow-h;
    z-index: 2;
  }
  ul {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1;
    li {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      .hrm-title {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-align: center;
        font-size: 24px;
        background-image: -webkit-gradient(
          linear,
          0 bottom,
          0 0,
          from(rgba(0, 0, 0, 1)),
          to(rgba(0, 0, 0, 0))
        );
      }
    }
  }
}
</style>
